<template>
    <div>
        <Modal v-model="show" title="添加用户"
               :mask-closable="false" :closable="false">
            <Form ref="modalForm" :model="data"
                  :label-width="100" :rules="rules">
                <FormItem label="登录名" prop="userName">
                    <Input v-model.trim="data.userName" placeholder="登录名"/>
                </FormItem>
                <FormItem label="用户姓名" prop="nickName">
                    <Input v-model.trim="data.nickName" placeholder="用户姓名"/>
                </FormItem>
                <FormItem label="密码 " prop="password">
                    <Input v-model.trim="data.password" type="password" placeholder="密码"/>
                </FormItem>
                <FormItem label="确认密码 " prop="confirm">
                    <Input v-model.trim="data.confirm" type="password" placeholder="再次输入密码"/>
                </FormItem>
                <FormItem label="角色" prop="roleId">
                    <Select v-model="data.roleId" placeholder="--请选择角色--">
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.roleName }}
                        </Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
                <Button type="primary" :loading="loading" @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';

    export default {
        data() {
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.data.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                show: true,
                roleList: [],
                data: {
                    userName: '',
                    nickName: '',
                    password: '',
                    confirm: '',
                    roleId: ''
                },
                rules: {
                    userName: [
                        {required: true, message: '登录名不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {
                            type: 'string',
                            min: 6,
                            max: 15,
                            pattern: /^[0-9A-Za-z]\w{5,15}$/,
                            message: '密码少于6位',
                            trigger: 'blur'
                        }
                    ],
                    confirm: [
                        {validator: validatePassword, required: true, trigger: 'blur'}
                    ],
                    roleId: [
                        {required: true, message: '请选择角色', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            ...mapActions(['addSystemUser', 'getRoleList']),
            cancel(reload = false) {
                this.$emit('cancel', 'add', reload);
            },
            ok() {
                this.addUser();
            },
            addUser() {
                this.loading = true;
                this.$refs['modalForm'].validate((valid) => {
                    if (valid) {
                        this.addSystemUser({
                            userName: this.data.userName,
                            nickName: this.data.nickName,
                            password: this.data.password,
                            confirm: this.data.confirm,
                            roleId: this.data.roleId
                        }).then(res => {
                            if (res.code === '0000') {
                                this.$Message.success('用户 ' + this.data.userName + ' 添加成功');
                                this.cancel(true);
                                this.loading = false;
                            } else {
                                this.$Message.error(this.$t('addDataFailed'));
                                this.loading = false;
                            }
                        });
                    } else {
                        this.loading = false;
                    }
                });
            },
            initRole() {
                this.getRoleList({}).then(res => {
                    this.roleList = res.data;
                });
            }
        },
        created() {
            this.initRole();
        }
    };
</script>